import React from 'react';
import { Tooltip } from 'antd';
import moment from 'moment';
import { useTablePipeline } from 'ali-react-table';
import { AntdBaseTable } from '@/base/TBaseTable';
import { ToFixed } from '../../../tool';
import type { IDataListType } from '../../../type';
import { IMaintenancePlanModalType } from '../../../type';
import styles from './index.less';

interface IProps {
  /**
   * 数据源
   */
  dataSource?: IDataListType[];
  /**
   * 编辑事件
   */
  onEdit?: (record: IDataListType, type: IMaintenancePlanModalType) => void;
}

const MaintenanceSchedule = (props: IProps) => {
  const { dataSource = [], onEdit } = props;

  const _onEdit = (record: IDataListType) => {
    if (record.planState) return;
    onEdit && onEdit(record, IMaintenancePlanModalType.EDIT);
  };

  const getColumns = () => {
    const columns = [
      {
        code: 'stationName',
        name: '交易单元',
        lock: true,
        width: 100,
        align: 'center',
        render(v: string) {
          return (
            <div className={styles.reason}>
              <Tooltip placement="topLeft" title={v}>
                {v || '-'}
              </Tooltip>
            </div>
          );
        },
      },
      {
        code: 'startDate',
        name: '起始时间',
        width: 120,
        align: 'center',
        render(v: number, record: IDataListType) {
          return v && record?.startTime
            ? moment(`${v} ${record?.startTime}`).format('HHmm') === '0000'
              ? moment(`${v} ${record?.startTime}`).subtract(1, 'day').format('YYYYMMDD 2400')
              : moment(`${v} ${record?.startTime}`).format('YYYYMMDD HHmm')
            : '-';
        },
      },
      {
        code: 'endDate',
        name: '终止时间',
        width: 120,
        align: 'center',
        render(v: number, record: IDataListType) {
          return v && record?.endTime
            ? moment(`${v} ${record?.endTime}`).format('HHmm') === '0000'
              ? moment(`${v} ${record?.endTime}`).subtract(1, 'day').format('YYYYMMDD 2400')
              : moment(`${v} ${record?.endTime}`).format('YYYYMMDD HHmm')
            : '-';
        },
      },
      {
        code: 'effectCapacity',
        name: '影响容量',
        width: 100,
        align: 'center',
        render(v: number) {
          return ToFixed(v, 3) ?? '-';
        },
      },
      {
        code: 'tendingDateTime',
        name: '维护时间',
        width: 120,
        align: 'center',
        render(v: number) {
          return v ? moment(v).format('YYYYMMDD HHmmss') : '-';
        },
      },
      {
        code: 'tendingEvent',
        name: '检修事件',
        width: 300,
        align: 'center',
        render(v: string) {
          return (
            <div className={styles.reason}>
              <Tooltip
                placement="topLeft"
                title={v}
                overlayInnerStyle={{
                  maxHeight: '200px',
                  overflowY: 'auto',
                  minWidth: '300px',
                }}
              >
                {v || '-'}
              </Tooltip>
            </div>
          );
        },
      },
      {
        code: 'planState',
        name: '计划状态',
        width: 80,
        align: 'center',
        render(v: number) {
          switch (v) {
            case 0:
              return <span>未开始</span>;
            case 1:
              return <span className={styles.falSp}>已取消</span>;
            case 2:
              return <span className={styles.rigSp}>已完成</span>;
          }
        },
      },
      {
        code: 'tendingUserName',
        name: '维护人',
        width: 80,
        align: 'center',
        render(v: number) {
          return v || '-';
        },
      },
    ];
    if (onEdit) {
      columns.push({
        code: 'operation',
        name: '操作',
        width: 60,
        align: 'center',
        // @ts-ignore
        render(v: number, record: any) {
          return (
            <div
              className={[0].includes(record.planState) ? styles.options : styles.disabled_options}
              onClick={() => _onEdit(record)}
            >
              编辑
            </div>
          );
        },
      });
    }
    return columns;
  };

  const pipeline = useTablePipeline({ components: {} })
    .input({ dataSource, columns: getColumns() as any })
    .primaryKey('id')
    .appendRowPropsGetter((): any => {
      const color = '#222629';
      return {
        style: { '--bgcolor': color, '--hover-bgcolor': color },
      };
    });

  return (
    <div className={`${styles.container}`}>
      <AntdBaseTable
        useVirtual={{ horizontal: true, vertical: true, header: false }}
        key="id"
        style={{
          '--row-height': '28px',
          '--header-bgcolor': '#383C3E',
          '--header-row-height': '28px',
          '--cell-padding': '4px 16px',
          '--cell-border-vertical': '1px solid #4E5154',
          '--header-cell-border-vertical': '1px solid #4E5154',
          '--bgcolor': '#2222629',
          '--hover-bgcolor': '#2222629',
          '--highlight-bgcolor': '#2222629',
        }}
        {...pipeline.getProps()}
      />
    </div>
  );
};

export default MaintenanceSchedule;
